<template>
  <div>
    <el-form :model="queryForm" :inline="true" class="demo-form-inline" style="display: flex; align-items: flex-end;">
      <el-form-item label="课程名称">
        <el-input v-model="queryForm.user" placeholder="请输入课程名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryForm.status" placeholder="状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="上架" value="1"></el-option>
          <el-option label="下架" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="query">查询</el-button>
      </el-form-item>
      <el-form-item style="margin-left: auto">
        <el-button @click="$router.push({ name: 'course-create' })" type="info" icon="el-icon-plus">添加课程</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="courseList" style="width: 100%">
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="sortNum" label="排序">
      </el-table-column>
      <el-table-column prop="status" label="上架状态">
        <template slot-scope="scope">
            <!-- <img :src=" " alt=""> -->
            <!-- <i class="status" :class="scope.row.status === 0 ? 'status-danger' : 'status-success'"></i> -->
            <el-switch v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="onStateChange(scope.row)"
            :disabled="scope.row.isStatusLoading" />
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button size="mini" @click="$router.push({
              name: 'course-edit',
              params: {
                courseId: scope.row.id
              }
            })">编辑</el-button>
            <el-button size="mini" @click="$router.push({
              name: 'course-section',
              params: {
                courseId: scope.row.id
              }
            })">内容管理</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCourses, changeState } from '@/services/course'
export default Vue.extend({
  name: 'CourseList',
  data () {
    return {
      queryForm: {
        currentPage: 1,
        pageSize: 10,
        courseName: '',
        status: null
      },
      courseList: [],
      total: 0
    }
  },
  mounted () {
    this.loadCourse()
  },
  methods: {
    query () {
      //
    },
    async loadCourse () {
      const { data } = await getCourses(this.queryForm)
      data.data.records.forEach((item: any) => {
        item.isStatusLoading = false
      })
      this.courseList = data.data.records
      this.courseList.forEach((item: any) => {
        item.price = '￥' + item.price
      })
      this.total = data.data.total
    },
    async onStateChange (course: any) {
      course.isStatusLoading = true
      const { data } = await changeState({
        courseId: course.id,
        status: course.status
      })
      this.$message.success(course.status === 0 ? '下架成功' : '上架成功')
      course.isStatusLoading = false
    }
  }
})

</script>

<style lang="scss" scope></style>
